<!--应用请求详情-->
<template>
    <div class="request-details">
        <el-page-header @back="goBack" :content="detailData.requestUrl"></el-page-header>
        <el-row :gutter="10" style="margin-top: 15px;">
            <el-col :span="8"><span class="span-view">traceId</span>{{detailData.traceId}}</el-col>
            <el-col :span="6"><span class="span-view">开始时间</span>{{new Date(detailData.startTime).toLocaleString()}}
            </el-col>
            <el-col :span="6"><span class="span-view">结束时间</span>{{new Date(detailData.endTime).toLocaleString()}}
            </el-col>
            <el-col :span="4"><span class="span-view">总耗时</span>{{detailData.costTime}}ms</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-tree
                :data="dataList"
                default-expand-all
                :expand-on-click-node="false"
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @node-click="nodeClick"
        >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span :style="{color: data.status===1?'black':'red'}">{{ node.label }}</span>
                    <span class="time-shaft">
                          <span class="shaft-show">
                              <span class="shaft-show-time"
                                    :style="{width:(data.costTime/totalTime)*100+'%',background: data.status===1?'green':'red'}"></span>
                          </span>
                          <span class="shaft-label">{{data.costTime}}ms</span>
                      </span>
                 </span>
        </el-tree>
        <el-tabs v-model="activeName" style="margin-bottom: 15px;" @tab-click="handleClick">
            <el-tab-pane label="拓扑图" name="topology">
                <Topology ref="topology" @change="topologyChange"></Topology>
            </el-tab-pane>
            <el-tab-pane label="详细信息" name="detail">
                <div v-for="(item,index) in detailsList" :key="index" style="margin-top: 10px;"><span class="span-view">{{item.key}}</span>{{item.label}}
                </div>
            </el-tab-pane>
            <el-tab-pane v-if="errorFlag" label="异常堆栈" name="errorMsg">
                <div style="color: red;">{{detailData.msg}}</div>
                <div v-for="(item,index) in errorData" :key="index">{{item.declaringClass}}(<span
                        style="color: #cccccc">{{item.fileName}}.{{item.methodName}}:{{item.lineNumber}}</span>)
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import {queryAppDataByTraceId, queryAppDataDetails} from '../../request/api'
    import Topology from './topology'

    export default {
        name: 'requestDetails',
        components: {
            Topology
        },
        data() {
            return {
                detailData: {},
                dataList: [],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                    id: 'spanId'
                },
                totalTime: 0,
                activeName: 'topology',
                errorFlag: false,
                detailsList: [],
                errorData: {},
                relList: []
            }
        },
        methods: {
            //初始化
            init(data) {
                this.detailData = data;
                this.activeName = 'topology';
                queryAppDataByTraceId(this.detailData.traceId).then(response => {
                    this.dataList = response.data;
                    this.totalTime = this.dataList && this.dataList.length > 0 ? this.dataList[0].costTime : 0;
                });
                this.errorFlag = this.detailData.status !== 1;
                this.queryDetails(this.detailData.dataId);
            },
            queryDetails(dataId) {
                this.detailsList = [];
                queryAppDataDetails(dataId).then(response => {
                    console.log(response);
                    if (response.data.appInfo) {
                        this.errorFlag = response.data.appInfo.status !== 1;
                    }
                    if (this.errorFlag && response.data.details && response.data.details.stackTrace) {
                        this.errorData = JSON.parse(response.data.details.stackTrace);
                    }
                    Object.keys(response.data.details).forEach(key => {
                        if (key !== 'stackTrace') {
                            this.detailsList.push({key: key, label: response.data.details[key]})
                        }
                    });
                    this.relList = response.data.relList;
                    if (this.relList) {
                        this.$refs.topology.init(this.relList);
                    }
                });
            },
            //返回
            goBack() {
                this.$emit("back");
            },
            //节点点击
            nodeClick(data) {
                this.activeName = 'detail';
                this.queryDetails(data.dataId);
            },
            topologyChange(dataId) {
                this.activeName = 'detail';
                this.queryDetails(dataId);
            },
            handleClick(tab) {
                if (tab.name === 'topology') {
                    this.$refs.topology.init(this.relList);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .request-details {
        font-size: 12px;

        .span-view {
            background: #409EFF;
            color: #ffffff;
            border-radius: 2px;
            padding: 0 5px;
            margin-right: 5px;
        }

        .custom-tree-node {
            width: 100%;

            .time-shaft {
                width: 300px;
                display: block;
                float: right;

                .shaft-show {
                    width: 200px;
                    float: left;

                    .shaft-show-time {
                        display: block;
                        height: 10px;
                        margin-top: 7px;
                    }
                }

                .shaft-label {
                    float: right;
                    margin-right: 5px;
                    font-style: italic;
                    color: #666666;
                }
            }
        }
    }
</style>
